<template lang="html">

  <div class="container">
    <h3 class="title">{{title}}</h3>

    <ul class="box">
      <!-- <li class="item" v-for="(item, index) in proList" :key="index" @click=""> -->
      <li class="item" v-for="(item, index) in list" :key="item.id" @click="$emit('tap', {item})">
        <img :src="item.imgSrc" alt="">
        <p>{{item.name}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [
        {id: 0, imgSrc: '', name: ''}
      ]
    },

    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="css" scoped>
.container {
  padding: .2rem 0 2rem;
}

.title {
  padding: 0 .3rem;
  height: 1rem;
  line-height: 1rem;
  font-size: .44rem;
  color: #000;
}

.box {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  padding: 0 .3rem;
}

.item {
  flex-shrink: 0;
  width: 33.33%;
  text-align: center;
}

.item img {
  display: block;
  margin: 0 auto;
}

.item p {
  font-size: .4rem;
  color: #000;
}
</style>
